<template>
    <div>
        <el-tabs v-model="activeName">
            <!-- 家长端通知类型 -->
            <el-tab-pane label="家长端通知类型" name="first">
                <p style="background-color: white; color:white">
                    :
                </p>
                <p style="background-color: white;">
                    推送说明:常用推送只可使用邮件推送。其他类型推送,可选择短信、邮件或者关闭，短信需购买才可进行推送
                </p>
                <el-table :data="noticeParents" style="width: 100%">
                    <el-table-column prop="noticeType" width="220">
                    </el-table-column>
                    <el-table-column prop="classify" width="380">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.classify" @change="agreechange(scope)">
                                <el-radio :label="1">短信</el-radio>
                                <el-radio :label="2">邮件</el-radio>
                                <el-radio :label="3">关闭</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" width="300" style="color:rgb(243,244,243)">
                    </el-table-column>
                    <el-table-column prop="noteTemplate">
                        <template slot-scope="scope">
                        <el-link type="success" @click="noteDetail(scope)">短信通知</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="emailTemplate">
                        <template slot-scope="scope">
                        <el-link type="primary" @click="emailDetail(scope)">邮件通知</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next"
                        :total="parentTotal">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <!-- 老师端通知类型 -->
            <el-tab-pane label="老师端通知类型" name="second">
                <p style="background-color: white; color:white">
                    :
                </p>
                <p style="background-color: white;">
                    推送说明:所有类型推送,可选择短信、邮件或者关闭，若需使用短信，请充值！
                </p>
                <el-table :data="noticeTeacheres" style="width: 100%">
                    <el-table-column prop="noticeType" width="220">
                    </el-table-column>
                    <el-table-column prop="classify" width="380">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.classify" @change="agreechange1(scope)">
                                <el-radio :label="1">短信</el-radio>
                                <el-radio :label="2">邮件</el-radio>
                                <el-radio :label="3">关闭</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" width="300" style="color:darkgrey;">
                    </el-table-column>
                    <el-table-column prop="noteTemplate">
                        <template slot-scope="scope">
                        <el-link type="success" @click="noteDetail(scope)">短信通知</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="emailTemplate">
                        <template slot-scope="scope">
                        <el-link type="primary" @click="emailDetail(scope)">邮件通知</el-link>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <!-- 校长端通知类型 -->
            <el-tab-pane label="校长端通知类型" name="third">
                <p style="background-color: white; color:white">
                    :
                </p>
                <p style="background-color: white;">
                    推送说明:所有类型推送,可选择短信、邮件或者关闭，若需使用短信，请充值！
                </p>
                <el-table :data="noticeHeades" style="width: 100%">
                    <el-table-column prop="noticeType" width="200">
                    </el-table-column>
                    <el-table-column prop="classify" width="380">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.classify" @change="agreechange2(scope)">
                                <el-radio :label="1">短信</el-radio>
                                <el-radio :label="2">邮件</el-radio>
                                <el-radio :label="3">关闭</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" width="300" style="color:darkgrey;">
                    </el-table-column>
                    <el-table-column prop="noteTemplate">
                        <template slot-scope="scope">
                        <el-link type="success" @click="noteDetail(scope)">短信通知</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="emailTemplate">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="emailDetail(scope)">邮件通知</el-link>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            
        </el-tabs>
        
    </div>
</template>
<script>

export default {
    data() {
        return {
            noticeParents: [],
            noticeTeacheres: [],
            noticeHeades: [],
            parentTotal: 0,
            currentPage: 1,
            activeName: 'first',
            classify: 2,

        }
    },
    mounted() {
        this.$axios.post("/notice/findNoticeTeacher").then(res => {
            if (res.data.code == 200) {
                console.log(res.data)
                this.noticeTeacheres = res.data.data
            }
        })
        this.$axios.post("/notice/findNoticeHead").then(res => {
            if (res.data.code == 200) {
                console.log(res.data)
                this.noticeHeades = res.data.data
            }

        }),
            this.parentInfo()

    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.parentInfo()

        },
        parentInfo() {
            this.$axios.post("/notice/findNoticeParent/" + this.currentPage).then(res => {
                if (res.data.code == 200) {
                    console.log(res.data)
                    this.noticeParents = res.data.data.records
                    this.parentTotal = res.data.data.total
                }
            })
        },
        agreechange(scope) {
            console.log(scope.row.classify);
            let data = {
                classify: scope.row.classify,
                id: scope.row.id
            }
            this.$axios.post("/notice/updateClassifyParent", data).then(res =>{
                if(res.data.data == 200){
                    console.log(res.data)
                    this.parentInfo()
                }
            })
        },
        agreechange1(scope) {
            console.log(scope.row.classify);
            let data = {
                classify: scope.row.classify,
                id: scope.row.id
            }
            this.$axios.post("/notice/updateClassifyTeacher", data).then(res =>{
                if(res.data.data == 200){
                    console.log(res.data)
                
                }
            })
        },
        agreechange2(scope) {
            console.log(scope.row.classify);
            let data = {
                classify: scope.row.classify,
                id: scope.row.id
            }
            this.$axios.post("/notice/updateClassifyTeacher", data).then(res =>{
                if(res.data.data == 200){
                    console.log(res.data)
                
                }
            })
        },
        emailDetail(scope){
            console.log(scope.row)
            this.$router.push({
                
                name:"emailDetail",
                params:{
                    emailDetails: scope.row
                }
            })
        },
        noteDetail(scope){
            console.log(scope.row)
            this.$router.push({
                
                name:"noteDetail",
                params:{
                    noteDetails: scope.row
                }
            })
        },

      
    },
    
}
</script>
<style scoped></style>